<h1>笔记本</h1>

<section>
  <h2>说明</h2>
  <p>
    本功能用于记笔记、备忘录等。
  </p>
</section>

<section>
  <h2>示例</h2>
  <div class="bubble-wrapper right">
    <div class="bubble">
      <p>
        记笔记
      </p>
    </div>
  </div>
  <div class="bubble-wrapper left">
    <div class="bubble">
      <p>
        你想让我帮你记录什么呢？
      </p>
    </div>
  </div>
  <div class="bubble-wrapper right">
    <div class="bubble">
      <p>
        nana最可爱了！
      </p>
    </div>
  </div>
  <div class="bubble-wrapper left">
    <div class="bubble">
      <p>
        记下了，ID 是 1
      </p>
    </div>
  </div>
  <div class="bubble-wrapper right">
    <div class="bubble">
      <p>
        查看笔记
      </p>
    </div>
  </div>
  <div class="bubble-wrapper left">
    <div class="bubble">
      <p>
        ID：1
        内容：nana最可爱了！
      </p>
    </div>
  </div>
  <div class="bubble-wrapper left">
    <div class="bubble">
      <p>
        以上就是所有的 1 条笔记了
      </p>
    </div>
  </div>
  <div class="bubble-wrapper right">
    <div class="bubble">
      <p>
        删除笔记 1
      </p>
    </div>
  </div>
  <div class="bubble-wrapper left">
    <div class="bubble">
      <p>
        笔记 1 删除成功啦
      </p>
    </div>
  </div>
</section>

<section class="bg-color-1">
  <h2>格式</h2>

  <p>PS: 中括号部分不填则默认交互式地询问</p>

  <h3>记笔记</h3>
  <p>
    记笔记　[内容]
  </p>

  <h3>查看笔记</h3>
  <p>
    查看笔记
  </p>

  <h3>删除笔记</h3>
  <p>
    删除笔记　[笔记ID]
  </p>
</section>

<section class="bg-color-2">
  <h2>命令别名</h2>

  <h3>记笔记</h3>
  <p>
    记录, 记笔记, 添加笔记
  </p>

  <h3>查看笔记</h3>
  <p>
    查看记录, 查看笔记, 所有笔记
  </p>

  <h3>删除笔记</h3>
  <p>
    删除记录, 删除笔记
  </p>
</section>

<link rel="stylesheet" href="css/style.css">
<script src="js/genpage.js"></script>